<!--
 * @Author: wangyu
 * @Date: 2025-01-16 17:38:47
 * @LastEditTime: 2025-02-14 14:07:55
 * @LastEditors: wangyu
 * @Description: 
 * @FilePath: \website\app.vue
-->
<template>
  <div>
    <header class="banner h-560"></header>
    <div
      class="flex overflow-x-auto overflow-y-hidden border-b border-gray-200 whitespace-nowrap dark:border-gray-700"
    >
      <button
        v-for="item in tabs"
        :key="item.name"
        class="inline-flex items-center h-48 px-12 -mb-px text-sm text-center bg-transparent sm:text-base dark:border-blue-400 dark:text-blue-300 whitespace-nowrap focus:outline-none"
        :class="[item.active && 'border-blue-500 border-b-2']"
        @click="toActive(item)"
      >
        {{ item.name }}
      </button>
    </div>
    <NuxtPage />
  </div>
</template>

<script setup lang="ts">
const router = useRouter();
const route = useRoute();
type tab = { name: string; route: string; active: boolean };
const tabs = ref([
  { name: "首页", route: "/", active: true },
  { name: "走进妇联", route: "/womenFed", active: false },
  { name: "新闻资讯", route: "/news", active: false },
]);
const toActive = (tab: tab) => {
  tabs.value.forEach((item) => {
    item.active = false;
  });
  tab.active = true;
  // 跳转路由
  router.push(tab.route);
};
// 刷新设置默认激活tab
toActive(tabs.value.filter((item) => item.route === route.path)[0]);
</script>

<style scoped>
.banner {
  background-image: url("@/assets/imgs/banner.png");
  background-size: cover;
}
</style>
